<template>
  <div>
    <navComp :title="$route.meta.title" :back="$route.meta.back"></navComp>
    <div class="box">
      <img class="login_logo" src="../../assets/img/logo/orange.png" />
      <van-form @submit="login">
        <van-field
          v-model="userPhone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="userCode"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              :disabled="buffer"
              size="small"
              color="#FF6040"
              type="primary"
              native-type="button"
              @click="getCode"
              >{{
                buffer ? num + "秒后可以重新发送" : "获取验证码"
              }}</van-button
            >
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            color="#FF6040"
            native-type="submit"
            >点击登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  name: "",
  components: {},
  data() {
    return {
      userPhone: "",
      userCode: "",
      // sendStr: "获取验证码",
      buffer: false,
      num: 10,
    };
  },
  created() {},
  mounted() {},
  methods: {
    getTime(countTime) {
      let t = setInterval(() => {
        this.sendStr = `${Math.ceil((countTime - Date.now()) / 1000)}s发送`;
        if (countTime - Date.now() <= 0) {
          clearInterval(t);
          this.sendStr = "获取验证码";
          this.buffer = false;
        }
      }, 1000);
    },
    getCode() {
      let phone = this.userPhone;
      if (!/^1[3456789]\d{9}/.test(phone)) {
        this.$notify({
          type: "warning",
          message: "手机号格式有误！",
        });
        return;
      }
      this.$api.Retsms({ phone }).then((res) => {
        localStorage.setItem("code", res.data.list.code);
        this.buffer = true;
        let time = setInterval(() => {
          this.num--;
          if (this.num == 1) {
            clearInterval(time);
              this.buffer = false;
          }
        }, 1000);
      
      });
    },
    login() {
      let phone = this.userPhone;
      if (!/^1[3456789]\d{9}/.test(phone)) {
        this.$notify({
          type: "warning",
          message: "手机号格式有误！",
        });
        return;
      }
      let userCode = this.userCode;
      let code = JSON.parse(localStorage.getItem("code"));
      // if (Date.now() - time > 50000) {
      //   this.$notify({
      //     type: "warning",
      //     message: "验证码过期！",
      //   });
      //   return;
      // }
      if (this.userCode == code) {
        this.$api.Retsmslogin({ phone }).then((res) => {
          localStorage.setItem("memberInfo", JSON.stringify(res));
          this.$notify({ type: "success", message: "登陆成功" });
          console.log(res);
        });
        this.$router.push("/");
      }
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 200px;
}
</style>
